<template>
  <template v-if="字段.类型 == em.字段类型.关联字段">
    <!-- <el-cascader v-model="单项.部门id" :options="a.候选值集.部门id树" :props="树设置.级联选择" /> -->
    <template v-if="字段.关联组件?.树结构">
      <!-- {{ 插组件.a.级联选择 }} -->
      <el-cascader v-model="单项[字段.外键字段名!]" :options="插组件.a.候选值集[字段.外键字段名! + '树']" :props="插组件.成级联设置(字段)" />
    </template>
    <template v-else>
      <!-- 不能响应式👇？ -->
      <!-- <el-select-v2 v-model="单项[字段.外键字段名!]" :options="字段.外键字段名 ? 插组件.a.候选值集[字段.外键字段名] : []" /> -->
      <el-select v-model="单项[字段.外键字段名!]">
        <el-option v-for="item in 插组件.a.候选值集[字段.外键字段名!]" :key="item.id" :label="成候选值显示标签(item)" :value="item.id" />
      </el-select>
    </template>
  </template>
  <template v-else-if="字段.类型 == em.字段类型.富文本">
    <RichEdit v-model="字段值" />
  </template>
  <template v-else-if="字段.类型 == em.字段类型.arr包对象">
    <ArrayCtrl v-model="字段值" editable />
  </template>
  <template v-else-if="字段.类型 == em.字段类型.arr">
    <ArrayCtrl v-model="字段值" editable />
  </template>
  <template v-else-if="字段.类型 == em.字段类型.链接字段">
    <!-- <el-select v-model="字段值">
      <el-option v-for="item in 插组件.a.候选值集[字段.名称]" :key="item.id" :label="成候选值显示标签(item)" :value="item.id" />
    </el-select> -->
    <el-cascader v-model="字段值" :options="候选值集[字段.名称! + '树']" :props="插组件.成级联设置(字段)" />
  </template>
  <template v-else-if="字段.是外键">
    <!-- 字段:{{ 字段 }} -->
    <!-- {{ 插组件.a.候选值集 }} -->
    <el-select v-model="单项[字段.名称]">
      <el-option v-for="item in 插组件.a.候选值集[字段.名称]" :key="item.id" :label="成候选值显示标签(item)" :value="item.id" />
    </el-select>
  </template>
  <template v-else-if="字段.名称.includes('图标')">
    <IconSelect v-model="单项[字段.名称]"></IconSelect>
  </template>
  <template v-else-if="字段.类型 == '图片'">
    <SelectImage v-model="字段值" file-type="image" />
  </template>
  <template v-else-if="字段.类型 == '图片组'">
    <SelectImage multiple v-model="字段值" file-type="image" />
  </template>
  <template v-else-if="字段.类型 == 'bool'">
    <!-- <el-checkbox v-model="单项[字段.名称]" /> -->
    <q-toggle v-model="单项[字段.名称]" checked-icon="check" color="green" unchecked-icon="clear" />
  </template>
  <template v-else-if="字段.类型 == em.字段类型.多行文本">
    <el-input type="textarea" :rows="2" placeholder="" :maxlength="-1" :show-word-limit="false"
      :autosize="{ minRows: 2, maxRows: 4 }" v-model="单项[字段.名称]">
    </el-input>
  </template>
  <template v-else-if="字段.类型 == em.字段类型.人民币">
    <!-- <el-input :disabled="单项.disabled" v-model.number="单项[字段.名称]" /> -->
    <!-- <el-input v-model.number="输入金额" :formatter="(value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
        :parser="(value) => value.replace(/\￥\s?|(,*)/g, '')" :onchange="(e) => 输入金额变化(e, 字段.名称, 输入金额)" /> -->
    <a单字段输入_货币 :字段="字段" :单项="单项" />
  </template>
  <template v-else-if="字段.类型 == em.字段类型.time">
    <el-date-picker :disabled="单项.disabled" v-model="单项[字段.名称]" type="datetime" />
  </template>
  <template v-else-if="字段.类型 == em.字段类型.float64">
    <el-input :disabled="单项.disabled" v-model.number="单项[字段.名称]" />
  </template>
  <template v-else-if="字段.类型 == em.字段类型.int">
    <!-- <el-input-number v-model="单项[字段.名称]" :min="1" class="aunset" /> -->
    <el-input-number v-model="单项[字段.名称]" class="aunset" />
  </template>

  <template v-else-if="候选值">
    <template v-if="是展开单选">
      <div class=" q-gutter-sm row">
        <div v-for="item in 候选值">
          <q-radio v-model="单项[字段.名称]" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="item.label"
            :label="item.value" />
        </div>
      </div>
    </template>
    <template v-else>
      <el-select v-model="单项[字段.名称]" filterable :allow-create="字段.候选值设置?.可添加" default-first-option clearable
        value-key="id">
        <template #header v-if="字段.候选值设置?.可弹窗">
          <q-btn round icon="search" @click="弹窗搜索(单项, 字段)" size="sm" dense />
        </template>
        <el-option v-for="item in 候选值" :label="item.label" :value="item.value" :key="item.id" />
      </el-select>
    </template>
  </template>

  <template v-else>
    <el-input :disabled="单项.disabled" v-model="单项[字段.名称]" />
  </template>
  <a弹窗搜索表 ref="a弹窗搜索表ref" :父字段="父字段" :父单项="父单项" v-if="启用弹窗组件" v-model="启用弹窗组件"></a弹窗搜索表>
</template>
<script setup lang="ts">
import * as em from '@/enums';
import * as util from 'amtf/utils';
import { computed, inject, onBeforeMount, onMounted, ref, watch, toRef } from 'vue';
import a单字段输入_货币 from '@/components/a单字段输入_货币.vue';
import SelectImage from '@/components/selectImage/selectImage.vue'
import ArrayCtrl from '@/components/arrayCtrl/arrayCtrl.vue'
import RichEdit from '@/components/richtext/rich-edit.vue'

const props = withDefaults(defineProps<{
  字段: 字段;
  单项: 单项;
  插组件: 插组件;
  编辑否?: boolean;
  不展开选项否?: boolean;
  cfg?: any;
}>(),
  {
    编辑否: false
  });
const { 字段, 单项, cfg } = props
// console.log(`props.插组件.a.候选值集 👉`, props.插组件.a.候选值集)
const 候选值集 = computed(() => props.插组件?.a?.候选值集);

// const model = 单项[字段.名称]
const 字段值 = toRef(单项, 字段.名称);
// const 字段值 = computed({
//   // 读取时返回单项[字段.名称]的值
//   get() {
//     return 单项[字段.名称];
//   },
//   // 修改时同步更新单项[字段.名称]
//   set(newVal) {
//     单项[字段.名称] = newVal;
//   }
// });
const 候选值 = computed(() => {
  let res
  if (cfg?.候选值) {
    return cfg.候选值
  }
  res = props.插组件.取候选值(字段)
  return res
})

function 选择变化(e: any) {
  // console.log(`e 👉`, e)
}

// 候选值可能有多个字段，这里进行拼接
function 成候选值显示标签(item) {
  // console.log(`成候选值显示标签 item 👉`, item)
  let arr = []
  Object.entries(item).forEach(([key, value]) => {
    // console.log(`forEach 键：${key}，值：${value}`);
    if (key != 'id') {
      arr.unshift(value)
    }
  });
  let res = arr.join(" ")
  return res
}

watch(() => props.插组件.a.级联选择, (newValue, oldValue) => {
  console.log(`newValue 👉`, newValue)
}, { deep: true })

const 是展开单选 = computed(() => {
  let res = props.插组件.取展开选项否(props.字段)
  return res
})

const 启用弹窗组件 = ref(false)
const a弹窗搜索表ref = ref()
const 父字段 = ref({} as 字段)
const 父单项 = ref({} as 单项)
import a弹窗搜索表 from '@/components/a弹窗搜索表.vue';
function 弹窗搜索(单项, 字段) {
  // console.log(`单项 👉`, 单项)
  父字段.value = 字段
  父单项.value = 单项
  启用弹窗组件.value = true
  console.log(`a弹窗搜索表ref.value 👉`, a弹窗搜索表ref.value)
  if (a弹窗搜索表ref.value) {
    a弹窗搜索表ref.value.弹窗否 = true
  }
}

</script>
